<template>
  <div class="admin-comment-management">
    <div class="search-container">
      <el-select
          v-model="searchWord"
          placeholder="选择违规词搜索"
          clearable
          filterable
          @clear="handleSearchClear"
          @change="handleSearch"
          style="width: 300px; margin-bottom: 0; margin-right: 10px"
      >
        <el-option
            v-for="word in presetWords"
            :key="word"
            :label="word"
            :value="word"
        />
      </el-select>
      <el-button type="primary" @click="searchAllSensitiveComments">一键搜索所有违规评论</el-button>
      <el-button type="info" @click="handleReset">重置</el-button>
      <el-button type="danger" @click="batchDeleteComments" :disabled="selectedComments.length === 0">批量删除</el-button>
    </div>

    <el-table  @selection-change="handleSelectionChange" :data="comments" style="width: 100%;  height: calc(100vh - 280px);">
      <el-table-column type="selection" width="55" />
      <el-table-column label="评论者" width="200">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-avatar :src="scope.row.userPic" size="small" />
            <span style="margin-left: 10px">{{ scope.row.nickname }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="评论内容" />
      <el-table-column prop="createTime" label="评论时间" width="180">
        <template #default="scope">
          {{ formatDate(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button type="danger" size="small" @click="deleteComment(scope.row.commentId)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @current-change="handleCurrentChange"
        v-model:current-page="currentPage"
        :total="total"
        size="default"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        background
        layout="total, sizes, prev, pager, next, jumper"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import request from '@/api/request';
import { ElMessage } from 'element-plus';
interface Comment {
  commentId: number;
  articleId: number;
  userId: number;
  parentCommentId?: number;
  content: string;
  createTime: string;
  nickname: string;
  userPic: string;
}
const comments = ref<Comment[]>([]);

const formatDate = (date: Date) => {
  return new Date(date).toLocaleString();
};

const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const searchWord = ref('');
const presetWords = [
  // 不当言论
  "傻逼",
  "你妈",
  "操你",
  "靠",
  "草泥马",
  "日你",
  "操蛋",
  "死全家",
  "傻逼逼",
  "滚",
  "滚蛋",
  "二货",
  "滚犊子",
  "狗日的",
  "死逼",
  "屌",
  "屎",
  "屌丝",
  "牛逼",
  "牛B",
  "妈的",
  "操你妈",
  "你大爷",
  "你二大爷",
  "你爹",
  "你奶奶",
  "你祖宗",
  "你全家",
  "死全家",
  // 色情内容
  "黄片",
  "成人",
  "激情",
  "裸聊",
  "成人网站",
  "性",
  "自慰",
  "色情图片",
  "成人影片",
  "激情自拍",
  "激情视频",
  "援交",
  "性伴侣",
  "性服务",
  "肉棒",
  "骚货",
  "骚逼",
  "嫩模",
  "做爱",
  "激情床戏",
  "裸露",
  "露点",
  "露毛",
  "露乳",
  "露背",
  // 暴力恐怖
  "恐怖分子",
  "炸弹",
  "爆炸",
  "血腥",
  "杀人",
  "自杀",
  "自残",
  "暴力",
  "殴打",
  "打架",
  "杀戮",
  "血腥图片",
  "血腥视频",
  "恐怖袭击",
  "恐怖组织",
  "恐怖分子",
  "恐怖事件",
  "恐怖分子",
  // 政治敏感
  "六四",
  "法轮功",
  "台独",
  "藏独",
  "新疆分裂",
  "民主运动",
  "维吾尔",
  "西藏",
  "敏感词",
  "反动",
  "反革命",
  "颠覆国家",
  "推翻政府",
  "煽动",
  "抗争",
  "示威",
  "示威游行",
  "集会",
  "示威者",
  "抗议",
  // 违法违规
  "赌博",
  "毒品",
  "贩毒",
  "毒品交易",
  "吸毒",
  "毒品制造",
  "毒品走私",
  "诈骗",
  "黑客",
  "外挂",
  "破解",
  "盗版",
  "刷单",
  "刷信誉",
  "黑客攻击",
  "网络攻击",
  "病毒",
  "木马",
  "钓鱼",
  "非法集资",
  "传销",
  "非法经营",
  "非法广告",
  "非法内容",
  "非法软件",
  "非法交易",
  "非法洗钱",
  "操控市场",
  "赌博网站",
  "博彩",
  "私彩",
  "六合彩",
  // 其他低俗、侮辱性词汇
  "贱人",
  "死变态",
  "死变态",
  "白痴",
  "傻逼",
  "蠢货",
  "二货",
  "死二货",
  "死全家",
  "死全家",
  "死全家",
  "二货",
  "婊子",
  "婊子养的",
  "贱货",
  "卖逼",
  "卖比",
  "死妈",
  "死你全家",
  "你妈逼",
  "你娘",
  "你爹",
  "你祖宗十八代",
  // 其他常用敏感词
  "共产党",
  "反共",
  "法轮",
  "台独",
  "藏独",
  "新疆独立",
  "维吾尔族",
  "西藏独立",
  "法轮大法",
  "法轮功",
  "六四事件",
  "六四运动",
  "天安门事件",
  "天安门广场",
  "民主自由",
  "人权",
  "示威游行",
  "抗争",
  "抗议",
  "集会",
  "示威者",
  "推翻政府",
  "颠覆政权"
];
const selectedComments = ref<Comment[]>([]); // 新增：存储选中的评论
// 处理选择变化
const handleSelectionChange = (val: Comment[]) => {
  selectedComments.value = val;
};
// 批量删除评论
const batchDeleteComments = async () => {
  try {
    const commentIds = selectedComments.value.map(item => item.commentId);
    await request.post('/comments/batchDelete', commentIds);
    ElMessage.success('批量删除评论成功');
    await getComments(currentPage.value, pageSize.value);
    selectedComments.value = []; // 清空选择
  } catch (error) {
    console.error('批量删除评论失败:', error);
    ElMessage.error('批量删除评论失败');
  }
};
// 获取评论列表
const getComments = async (pageNum: number, pageSize: number, sensitiveWords?: string[]) => {
  try {
    const params = {
      pageNum,
      pageSize,
      // 若传入敏感词列表，将其用逗号拼接
      sensitiveWord: sensitiveWords ? sensitiveWords.join(',') : searchWord.value
    };
    const response = await request.get('/comments/all', {
      params
    });
    comments.value = response.data.list;
    total.value = response.data.total;
  } catch (error) {
    console.error('获取评论列表失败:', error);
    ElMessage.error('获取评论列表失败');
  }
};
// 一键搜索所有违规评论
const searchAllSensitiveComments = () => {
  currentPage.value = 1;
  // 传入所有预设违规词
  getComments(currentPage.value, pageSize.value, presetWords);
};
// 搜索处理
const handleSearch = () => {
  currentPage.value = 1;
  getComments(currentPage.value, pageSize.value);
};
// 清空搜索
const handleSearchClear = () => {
  currentPage.value = 1;
  getComments(currentPage.value, pageSize.value);
};

// 删除评论
const deleteComment = async (commentId: number) => {
  try {
    await request.post('/comments/delete', null , {
      params: {
        commentId: commentId,
      },
    });
    ElMessage.success('删除评论成功');
    await getComments(currentPage.value, pageSize.value);
  } catch (error) {
    console.error('删除评论失败:', error);
    ElMessage.error('删除评论失败');
  }
};
// 重置搜索条件和页码
const handleReset = () => {
  currentPage.value = 1;
  searchWord.value = '';
  getComments(currentPage.value, pageSize.value);
};
// 页码改变时触发
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  getComments(currentPage.value, pageSize.value);
};

onMounted(() => {
  getComments(currentPage.value, pageSize.value);
});
</script>

<style scoped>
.admin-comment-management {
  padding: 14px;
  background-color: #f8fafc;

}
.search-container {
  margin-bottom: 24px;
  padding: 10px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #e4e7ed;
}
:deep(.el-table) {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid #e4e7ed;
}

:deep(.el-table th) {
  background-color: #f1f5f9;
  color: #475569;
  font-weight: 600;
  height: 56px;
}

:deep(.el-table td) {
  height: 52px;
  color: #64748b;
}
.el-pagination {
  margin-top: 24px;
  padding: 16px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e4e7ed;
}
.el-button--danger {
  background: #ef4444;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.el-button--danger:hover {
  background: #dc2626;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(239, 68, 68, 0.25);
}

.el-avatar {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.el-avatar:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
:deep(.el-table__row) {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:deep(.el-table__row:hover) {
  background-color: #f8fafc !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.el-input {
  border-radius: 8px;
  transition: all 0.3s;
}

.el-input:hover {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

</style>

